<template>
  <div id="detail_goodscomment">
    <div class="comment">
      <h3 class="left">用户评价</h3>
      <a href="javascript:;" class="right">更多</a>
    </div>
    <div class="comment_info">
      <ul>
        <li></li>
      </ul>
    </div>
    <div class="users">
      <ul>
        <li v-if="user1">
          <img :src="user1.avatar" alt="" class="avatar" />
          <span class="uname">{{ user1.uname }}</span>
          <p>{{ content }}</p>
          <div class="style1">
            <span>{{ time }}</span>
            {{ style1 }}
          </div>
          <span v-for="(item, index) in images" :key="index"
            ><img :src="item" alt="" class="style1_img"
          /></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "detail_goodscomment", // 组件参数 接收来自父组件的数据
  props: {
    cRate: {
      type: Number,
      default() {
        return 0;
      },
    },
    content: {
      type: String,
      default() {
        return "";
      },
    },
    style1: {
      type: String,
      default() {
        return "";
      },
    },
    user1: {
      type: Object,
      default() {
        return {};
      },
    },
    images: {
      type: Array,
      default() {
        return [];
      },
    },
    created: {
      type: Number,
      default() {
        return 0;
      },
    },
  }, // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {};
  },
  computed: {
    time() {
      return this.$moment(this.created * 1000).format("YYYY年MM月DD日"); // "YYYY年MM月DD日 HH时mm分ss秒" 2019年08月01日 19时50分20秒
    },
  },
};
</script>
<style scoped>
.comment {
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-bottom: 2px solid #eee;
}
.right {
  color: #000;
}

.users li {
  padding: 20px 10px 0;
  border-bottom: 3px solid #eee;
}
.users p {
  margin: 10px 0;
}
.style1_img {
  width: 120px;
  height: 120px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.style1 {
  margin-bottom: 10px;
  color: #555;
  font-size: 12px;
}
.uname {
  font-size: 18px;
}
</style>